<template>
    <div class="container">
        <el-page-header class="go-back" @back="goBack" content="返回"></el-page-header>

        <div class="order">
            <div class="order-item">
<!--                <div class="item1">订单号</div>-->
                <div class="item1">店铺名称</div>
                <div class="item1">商品数量</div>
                <div class="item1">订单价格</div>
                <div class="item1">订单状态</div>
                <div class="item1">下单时间</div>
                <div class="item1">操作</div>
            </div>
            <div class="order-item" v-for="(item,index) in orders" :key="index" style="font-size: 13px">
<!--                <div class="item1">{{item.orderNo}}</div>-->
                <div class="item1">{{item.shopName}}</div>
                <div class="item1">{{item.count}}</div>
                <div class="item1">{{item.price}}</div>
                <div class="item1">
                    <span v-if="item.state == 1" style="color: red;font-weight: bold">未支付</span>
                    <span v-if="item.state == 2">已支付</span>
                    <span v-if="item.state == 3">已确认</span>
                    <span v-if="item.state == 4">已退款</span>
                    <span v-if="item.state == 5">-已取消</span>
                </div>
                <div class="item1">{{item.createTime}}</div>
                <div class="item1" style="color: #42b983;cursor: pointer" @click="toOrderDetail(item)">查看详情</div>
            </div>
        </div>
    </div>
</template>

<script>
    import {orderList} from '../../../api/common'
    export default {
        name: "OrderList",
        data() {
            return{
                orders:[],
            }
        },
        created() {
            let userJson = localStorage.getItem('bus-user');
            if (userJson) {
                let user = JSON.parse(userJson);
                this.user = user
            } else {
                this.$message.info("请您重新登陆")
            }
            let param = {userId: this.user.id}
            this.queryOrderList(param)
        },
        methods: {
            goBack() {
                this.$router.go(-1)
            },
            queryOrderList(param){
                orderList(param).then(res => {
                    if (res.code == 200){
                        this.orders=res.data
                    }else {
                        this.$message.info("查询订单列表异常")
                    }
                })
            },
            toOrderDetail(item){
                this.$router.push({
                    path: '/orderDetail',
                    query:{
                        orderNo:item.orderNo,
                    }
                })
            }
        }
    }
</script>

<style scoped>
    .container {
        width: 70%;
        min-height: 100%;
        height: auto;
        margin-left: 15%;
        background-color: #ffffff;
        position: absolute;
    }
    .go-back {
        margin-left: 10%;
        margin-top: 30px;
    }
    .order{
        width: 100%;
        float: left;
        margin-top: 70px;
        padding-left: 50px;
    }
    .order-item{
        height: 60px;
        width: 100%;
        float: left;
    }
    .item1{
        float: left;
        width: 14%;
        overflow: hidden;
    }
</style>
